<template>
  <view
    class="hs-tab-006"
    :class="eachLinenNum > rowNum ? 'slider-container-show' : ''"
  >
    <scroll-view
      class="menu-scroll"
      scroll-x="true"
      :show-scrollbar="false"
      scroll-with-animation="true"
      @scroll="scrollFn"
    >
      <view
        class="hs-tab-item"
        :class="`row${rowNum}`"
        v-for="(list, ind) in processDataList"
        :key="ind"
      >
        <view class="menu-item" v-for="(item, index) in list" :key="index">
          <text class="iconfont" v-if="item.icon" :class="item.icon"></text>
          <image
            class="image-style"
            v-if="item.imageUrl"
            :src="item.imageUrl"
          />
          <text class="title">{{ item.title }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="slider-container" v-if="eachLinenNum > rowNum">
      <view
        class="slider-high"
        :style="{ width: sliderHighWidth + 'px', left: sliderHighLeft + 'px' }"
      ></view>
    </view>
  </view>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";

export default defineComponent({
  name: "hstab003",
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [
          {
            icon: "icon-weibiaoti--40",
            title: "购物车",
          },
          {
            icon: "icon-weibiaoti--22",
            title: "关注商品",
          },
          {
            icon: "icon-weibiaoti--25",
            title: "地址管理",
          },
          {
            icon: "icon-weibiaoti--31",
            title: "标签管理",
          },
          {
            icon: "icon-weibiaoti--33",
            title: "更多设置",
          },
          {
            icon: "icon-weibiaoti--32",
            title: "工具",
          },
          {
            icon: "icon-weibiaoti--39",
            title: "统计",
          },
          {
            icon: "icon-weibiaoti--41",
            title: "周边产品",
          },
          {
            icon: "icon-weibiaoti--16",
            title: "下载",
          },
          {
            icon: "icon-weibiaoti--14",
            title: "发布",
          },
          {
            icon: "icon-weibiaoti--9",
            title: "消息",
          },
          {
            icon: "icon-weibiaoti--6",
            title: "我的",
          },
          {
            icon: "icon-weibiaoti--12",
            title: "收藏",
          },
        ];
      },
    },
    rowNum: {
      type: Number,
      default: 4,
    },
    eachLinenNum: {
      type: Number,
      default: 7,
    },
  },
  components: {},
  setup(props) {
    const data = reactive({
      scrollWidth: 0,
      allMenuItemWidth: 0,
      sliderContainerWidth: 0,
      sliderHighWidth: 0,
      sliderHighLeft: 0,
      rowNum: props.rowNum, //固定显示列数  可选4 5 6
      eachLinenNum: props.eachLinenNum, //每行显示的个数
      dataList: props.dataList,
      // 处理后的数据
      processDataList: [],
    });
    onMounted(() => {
      dataProcessing();
    });
    // 根据每行显示的个数，处理数据
    const dataProcessing = () => {
      data.processDataList = [];
      data.dataList.forEach((item, index) => {
        // 求余数
        const remainder = index % data.eachLinenNum;
        if (!data.processDataList[remainder]) {
          data.processDataList[remainder] = [];
        }
        data.processDataList[remainder].push(item);
      });
      setTimeout(() => {
        getScrollinfo();
        getAllMenuItem();
        if (data.eachLinenNum > data.rowNum) {
          setSliderHighSize();
        }
      }, 500);
    };

    const { proxy } = getCurrentInstance();
    const getScrollinfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".menu-scroll")
        .boundingClientRect((ele) => {
          data.scrollWidth = ele.width;
        })
        .exec();
    };
    const getAllMenuItem = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .selectAll(".hs-tab-item")
        .boundingClientRect((ele) => {
          let itemLength = ele.length;
          // console.log("ele", ele);
          for (let i = 0; i < itemLength; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            data.allMenuItemWidth += ele[i].width;
          }
        })
        .exec();
    };
    // 获取滑块容器的宽度，设置滑块高亮宽度
    const setSliderHighSize = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".slider-container")
        .boundingClientRect((ele) => {
          data.sliderContainerWidth = ele.width;
          data.sliderHighWidth =
            (data.scrollWidth / data.allMenuItemWidth) *
            data.sliderContainerWidth;
        })
        .exec();
    };
    // 滚动时计算滑块的位置left
    const scrollFn = (e) => {
      // 滚动的left
      const scrollLeft = e.detail.scrollLeft;
      // 计算出滚动的比例
      const leftProportion = scrollLeft / data.allMenuItemWidth;
      // 比例乘以滑块容器宽度得出left
      data.sliderHighLeft = data.sliderContainerWidth * leftProportion;
    };
    return {
      scrollFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-006 {
  padding-right: 0;
  background: #fff;
  border-radius: 10rpx;
  padding-bottom: 20rpx;
  position: relative;
  &.slider-container-show {
    padding-bottom: 30rpx;
  }
  .menu-scroll {
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    .hs-tab-item {
      display: inline-block;
      width: 25%;
      // 顶部对齐
      vertical-align: top;
      &.row5 {
        width: 20%;
      }
      &.row6 {
        width: 16%;
      }
      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20rpx;
        .iconfont {
          font-size: 50rpx;
          color: #272727;
        }
        .image-style {
          display: block;
          width: 100rpx;
          height: 100rpx;
        }
        .title {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-weight: 300;
        }
      }
    }
  }
  .slider-container {
    position: absolute;
    bottom: 5rpx;
    left: 50%;
    transform: translateX(-50%);
    height: 6rpx;
    width: 80rpx;
    display: flex;
    background: #eee;
    border-radius: 3rpx;
    .slider-high {
      position: absolute;
      height: 100%;
      border-radius: 3rpx;
      background: #ff0777;
    }
  }
}
</style>
